<template>
  <div>
    <en-table-layout
      toolbar
      pagination
      :tableData="tableData.data"
      :loading="loading">
      <template slot="table-columns">
        <el-table-column label="上架销售日期">
          <template slot-scope="scope">{{ scope.row.create_time | unixToDate('yyyy-MM-dd hh:mm') }}</template>
        </el-table-column>
        <el-table-column label="商家店铺名称">
          <template slot-scope="scope">{{ scope.row.shop_name }}</template>
        </el-table-column>
        <el-table-column label="店铺地址">
          <template slot-scope="scope">{{ scope.row.shop_add }}</template>
        </el-table-column>
        <el-table-column label="联系电话">
          <template slot-scope="scope">{{ scope.row.setLinkPhone }}</template>
        </el-table-column>
        <el-table-column label="下单数量">
          <template slot-scope="scope">{{ scope.row.num || 0 }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleDraftEdit(scope.row)">查看价格
            </el-button>
          </template>
        </el-table-column>
      </template>
      <el-pagination
        slot="pagination"
        v-if="pageData"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="pageData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.data_total">
      </el-pagination>
    </en-table-layout>
    <el-dialog title="查看价格" :visible.sync="infoDialog" width="20%">
      <en-table-layout
        v-if="goodsSkunums === 1"
        :tableData="infoDetail">
        <template slot="table-columns">
          <el-table-column label="成本价格">
            <template slot-scope="scope">{{ scope.row.cost }}</template>
          </el-table-column>
          <el-table-column label="销售价格">
            <template slot-scope="scope">{{ scope.row.price }}</template>
          </el-table-column>
        </template>
      </en-table-layout>
      <en-table-layout
        :tableData="goodsSkuData"
        v-if="goodsSkunums > 1"
        :stripe="false">
        <template slot="table-columns">
          <el-table-column
            v-for="(item, index) in goodsSkuTitle"
            v-if="item.prop !== 'sku_id'"
            :label="item.label"
            :key="index">
            <template slot-scope="scope">
              <span  >{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </en-table-layout>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API_goods from '@/api/supplyGoods'
  export default {
    name: 'salesInformation',
    data() {
      return {
        /** 列表loading状态 */
        loading: false,
        goods_id: '',

        /** 列表参数 */
        params: {
          page_no: 1,
          page_size: 10,
          goods_id: this.$route.params.goods_id
        },

        /** 列表数据 */
        tableData: [],

        /** 列表分页数据 */
        pageData: [],

        /** 是否显示价格弹框 */
        infoDialog: false,
        goodsSkuTitle: [],
        goodsSkuData: null,
        goodsSkunums: 0
      }
    },
    beforeRouteUpdate(to, from, next) {
      this.params.goods_id = to.params.goods_id
      this.GET_SaleseInfo()
      next()
    },
    activated() {
      this.params.goods_id = this.$route.params.goods_id
      this.GET_SaleseInfo()
    },
    mounted() {
      this.params.goods_id = this.$route.params.goods_id
      this.GET_SaleseInfo()
    },
    methods: {
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.GET_SaleseInfo()
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.GET_SaleseInfo()
      },

      handleDraftEdit(row) {
        API_goods.getSalesInfoDetail(row.goods_id).then(response => {
          this.infoDetail = response
          this.goodsSkuTitle = this.goodsSkuData = []
          this.goodsSkunums = response.length
          if (response.length > 1) {
            this.$nextTick(() => {
              response.forEach((key) => {
                this.goodsSkuTitle = [
                  { label: 'SKU', prop: 'sku' },
                  { label: '成本价格', prop: 'cost' },
                  { label: '销售价格', prop: 'price' }
                ]
                // 构造表结构
                let _skuData = []
                key.spec_list.forEach(elem => {
                  _skuData.push(elem.spec_value)
                })
                _skuData = _skuData.join('/')
                const _key = {
                  sku: _skuData,
                  sku_id: key.sku_id,
                  cost: key.cost,
                  price: key.price
                }
                this.goodsSkuData.push(Object.assign(_key))
              })
            })
          } else {
            this.goodsSkuData = response[0]
          }
        })
        this.infoDialog = true
      },
      GET_SaleseInfo() {
        API_goods.getSalesInfo(this.params).then(response => {
          this.tableData = response
          this.pageData = {
            page_no: response.page_no,
            page_size: response.page_size,
            data_total: response.data_total
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .price {
    text-align: center;
    span {
      line-height: 30px;
      display: block;
    }
  }
</style>
